    <style type="text/css">

        body {

            font-family: "Microsoft YaHei";

        }



        body, div, p, img, a, h1, h3 {

            margin: 0;

            padding: 0;

        }

        img {

            border: 0;

        }

        a {

            text-decoration: none;

        }



        li {

            list-style: none;

        }



        .clearfix::after {

            content: '';

            display: block;

            clear: both;

            height: 1px;

            visibility: hidden;

        }



        .first {

            background: url('../images/first-bg.jpg') center top no-repeat;

            background-size: cover;

            min-width: 1200px;

            margin: 0 auto;

            position: relative;

        }



        .slogan {

            text-align: center;

        }



        .second {

            background: url('../images/four-bg.jpg') center bottom no-repeat;

            background-size: cover;

        }



        .third {

            background: url('../images/download-bg.png') center bottom no-repeat;

            background-size: cover;

        }



        .four {

            background: url('../images/media-bg.jpg') center bottom no-repeat;

            background-size: cover;

        }



        .five {

            background: url('../images/second-bg.jpg') center bottom no-repeat;

            background-size: cover;

        }



        .nav {

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            z-index: 999;

        }



        .nav-container {

            width: 1200px;

            height: 150px;

            margin: 0 auto;

            position: relative;

        }



        .nav-logo {

            position: absolute;

            display: block;

            padding-top: 20px;

            left: 50%;

            top: 0;

            margin-left: -43px;

            z-index: 3;

        }



        .nav-weibo, .nav-wechat {

            position: absolute;

            padding-top: 20px;

            top: 0;

            right: 0;

            z-index: 3;

        }



        .nav-weibo p, .nav-wechat p {

            color: #fff;

            font-size: 12px;

            line-height: 1.4em;

            text-align: center;

        }



        .nav-wechat {

            right: 125px;

        }



        .nav-bar {

            width: 1000px;

            margin: 0 auto;

        }



        .nav-bar::before {

            display: block;

            content: '';

            visibility: hidden;

            clear: both;

        }



        .nav-bar li {

            float: left;

            list-style: none;

            padding-top: 48px;

            margin-right: 40px;

        }



        .nav-bar li a {

            display: block;

            width: 100px;

            height: 30px;

            font-size: 18px;

            line-height: 30px;

            color: #ffffff;

            text-decoration: none;

            text-align: center;

        }



        .nav-bar li.active a {

            background: #4abe96;

            border-radius: 30px;

        }

        #fp-nav ul li a span, .fp-slidesNav ul li a span {

            border: 1px solid #ffffff;

        }

        #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {

            color: #4abe96;

            background: #4abe96;

            border: 1px solid #4abe96;

        }


        .product-list {

            padding-top: 150px;

            width: 772px;

            margin: 0 auto;

        }



        .product-list li {

            float: left;

            width: 336px;

            height: 161px;

            margin-right: 68px;

            margin-bottom: 40px;

            background-size: 100% 100%;

            font-size: 14px;

            line-height: 1.4em;

            color: #ffffff;

            position: relative;

        }



        .product-list li .product-intro {

            display: table;

            width: 137px;

            height: 157px;

            position: absolute;

            right: 0;

            top: 0;

        }



        .product-list li .product-intro > span {

            width: 121px;

            display: table-cell;

            vertical-align: middle;

            text-align: center;

            letter-spacing: 0.3px;

        }



        .product-list li:nth-child(2n) {

            margin-right: 0;

        }



        .four {

            min-width: 1200px;

        }



        .four .media {

            width: 1200px;

            height: 740px;

            margin: 100px auto 0;

            position: relative;

            color: #ffffff;

            text-align: center;

            font-size: 12px;

            line-height: 1.6em;

        }



        .media-1 {

            display: block;

            width: 210px;

            height: 210px;

            position: absolute;

            left: 235px;

            top: 60px;

            overflow: hidden;

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

        }



        .media-1-content {

            width: 290px;

            height: 291px;

            transform: rotate(-45deg) translateY(-60px);

            -webkit-transform: rotate(-45deg) translateY(-60px);

            -o-transform: rotate(-45deg) translateY(-60px);

            -moz-transform: rotate(-45deg) translateY(-60px);

            background: url("../images/square-1.png")

        }



        .media-2 {

            color: #ffffff;

            display: block;

            width: 230px;

            height: 230px;

            position: absolute;

            left: 81px;

            top: 240px;

            overflow: hidden;

            transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

        }



        .media-2-content {

            width: 320px;

            height: 320px;

            transform: rotate(-45deg) translateY(-60px);

            -webkit-transform: rotate(-45deg) translateY(-60px);

            -moz-transform: rotate(-45deg) translateY(-60px);

            -moz-transform: rotate(-45deg) translateY(-60px);

            background: url("../images/square-2.png")

        }



        .media-3 {

            display: block;

            width: 315px;

            height: 315px;

            position: absolute;

            left: 403px;

            top: 164px;

            overflow: hidden;

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

        }



        .media-3-content {

            width: 445px;

            height: 445px;

            transform: rotate(-45deg) translateY(-93px);

            -webkit-transform: rotate(-45deg) translateY(-93px);

            -moz-transform: rotate(-45deg) translateY(-93px);

            -o-transform: rotate(-45deg) translateY(-93px);

            background: url("../images/square-4.png")

        }



        .media-4 {

            display: block;

            width: 160px;

            height: 160px;

            position: absolute;

            left: 663px;

            top: 64px;

            overflow: hidden;

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

        }



        .media-4-content {

            width: 216px;

            height: 223px;

            transform: rotate(-45deg) translateY(-41px);

            -webkit-transform: rotate(-45deg) translateY(-41px);

            -moz-transform: rotate(-45deg) translateY(-41px);

            -o-transform: rotate(-45deg) translateY(-41px);

            background: url("../images/square-5.png")

        }



        .media-5 {

            width: 257px;

            display: block;

            height: 257px;

            position: absolute;

            left: 762px;

            top: 181px;

            overflow: hidden;

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

        }



        .media-5-content {

            width: 364px;

            height: 364px;

            transform: rotate(-45deg) translateY(-77px);

            -webkit-transform: rotate(-45deg) translateY(-77px);

            -moz-transform: rotate(-45deg) translateY(-77px);

            -o-transform: rotate(-45deg) translateY(-77px);

            background: url("../images/square-6.png")

        }



        .media-6 {

            display: block;

            width: 188px;

            height: 188px;

            position: absolute;

            left: 267px;

            top: 417px;

            overflow: hidden;

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

        }



        .media-6-content {

            width: 266px;

            height: 266px;

            transform: rotate(-45deg) translateY(-55px);

            -webkit-transform: rotate(-45deg) translateY(-55px);

            background: url("../images/square-3.png")

        }



        .media-7 {

            display: block;

            width: 208px;

            height: 208px;

            position: absolute;

            left: 647px;

            top: 419px;

            overflow: hidden;

            -webkit-border-radius: 100px;

            -moz-border-radius: 100px;

            -o-border-radius: 100px;

            border-radius: 100px;

        }



        .media-7-content {

            width: 208px;

            height: 208px;

            background: url("../images/square-7.png")

        }



        .media-1 .media-img {

            padding-top: 60px;

            padding-bottom: 10px;

        }



        .media-2 .media-img {

            padding-top: 70px;

            padding-bottom: 15px;

        }



        .media-3 .media-img {

            padding-top: 120px;

            padding-bottom: 50px;

        }



        .media-1 p {

            width: 210px;

            margin: 20px auto 0;

            color: #ffffff;

        }



        .media-2 p {

            width: 240px;

            margin: 0 auto 0;

        }



        .media-3 p {

            color: #ffffff;

            font-size: 16px;

            line-height: 24px;

            width: 260px;

            margin: 0 auto;

        }



        .media-4 .media-img {

            padding-top: 40px;

            padding-bottom: 5px;

        }



        .media-4 p {

            color: #ffffff;

            width: 152px;

            margin: 0 auto 0;

        }



        .media-5 .media-img {

            padding-top: 65px;

            padding-bottom: 15px;

        }



        .media-5 p {

            color: #ffffff;

            width: 300px;

            margin: 20px auto 0;

            font-size: 14px;

        }



        .media-6 .media-img {

            padding-top: 50px;

            padding-bottom: 15px;

        }



        .media-6 p {

            color: #ffffff;

            width: 200px;

            margin: 10px auto 0;

        }



        .dash {

            width: 210px;

            margin: 0 auto;

            border: 1px dashed #fff;

        }

        .five .intro {

            width: 917px;

            height: 259px;

            background: url("../images/intro-bg.png") no-repeat;

            margin: 0 auto;

            overflow: hidden;

            padding-bottom: 200px;

        }



        .five .intro .content {

            font-size: 16px;

            color: #ffffff;

            margin: 40px 30px auto;

        }



        .five .intro .content h3 {

            padding-left: 1em;

            padding-bottom: 1em;

            font-size: 18px;

        }



        .five .intro .content .intro-company {

            padding: 0 40px 30px;

            line-height: 28px;

        }



        .five .intro .content .intro-address {

            padding: 0 40px 10px;

        }



        .five .intro .content .intro-tel {

            padding: 0 40px;

        }



        .five footer {

            position: absolute;

            left: 0;

            right: 0;

            bottom: 0;

            text-align: center;

            color: #ffffff;

            font-size: 14px;

            line-height: 2em;

        }

    </style>